<template>
  <div class="container">
    <h2 class="title">基础信息</h2>
    <div class="form-container">
      <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="入库类型" prop="StockInType">
              <el-input
                v-model="form.StockInType"
                placeholder="请输入入库类型"
                clearable
              />
            </el-form-item>
            <el-form-item label="入库主题" prop="StockInSubject">
              <el-input
                v-model="form.StockInSubject"
                placeholder="请输入入库主题"
                clearable
              />
            </el-form-item>
            <el-form-item label="入库日期" prop="StockInDate">
              <el-date-picker
                v-model="form.StockInDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                clearable
              />
            </el-form-item>
            <el-form-item label="入库员工" prop="StockInEmployee">
              <el-input
                v-model="form.StockInEmployee"
                placeholder="请输入入库员工"
                clearable
              />
            </el-form-item>
            <el-form-item label="备注" prop="Remarks">
              <el-input
                v-model="form.Remarks"
                type="textarea"
                autosize
                placeholder="请输入备注信息"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库单号" prop="StockInCode">
              <el-input
                v-model="form.StockInCode"
                placeholder="请输入入库单号"
                style="width: 410px"
                :disabled="type.length > 0"
                clearable
              />
            </el-form-item>
            <el-form-item label="生产单号" prop="ProductionOrderID">
              <el-input
                v-model="form.ProductionOrderID"
                placeholder="请输入生产单号"
                clearable
              />
            </el-form-item>
            <el-form-item label="入库仓库" prop="WarehouseName">
              <el-cascader
                :options="warehouseOPtion"
                v-model="warehouseModel"
                :props="defaultProps"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="updateStockIn(ruleFormRef)">
            修改
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, reactive } from "vue";
import { type FormInstance, type FormRules, ElTable } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const type = ref([]);
const warehouseOPtion = ref([]);
const warehouseModel = ref([]);

interface RuleForm {
  StockInId: string;
  StockInType: string;
  StockInCode: string;
  StockInSubject: string;
  StockInDate: string;
  ProductionOrderID: string;
  StockInEmployee: string;
  WarehouseName: string;
  Remarks: string;
}

const form = reactive<RuleForm>({
  StockInId: "",
  StockInType: "",
  StockInCode: "",
  StockInSubject: "",
  StockInDate: "",
  ProductionOrderID: "",
  StockInEmployee: "",
  WarehouseName: "",
  Remarks: "",
});

const rules = reactive<FormRules<RuleForm>>({
  StockInType: [
    { required: true, message: "请输入入库类型", trigger: "blur" },
    { min: 2, max: 30, message: "长度在2到30之间", trigger: "blur" },
  ],
  StockInCode: [
    {
      required: true,
      message: "请输入入库单号",
      trigger: "change",
    },
  ],
  StockInSubject: [
    {
      required: true,
      message: "请输入入库主题",
      trigger: "change",
    },
  ],
  StockInDate: [
    {
      required: true,
      message: "请输入入库日期",
      trigger: "change",
    },
  ],
  ProductionOrderID: [
    {
      required: true,
      message: "请输入生产单号",
      trigger: "change",
    },
  ],
  StockInEmployee: [
    {
      required: true,
      message: "请输入工号",
      trigger: "change",
    },
  ],
  Remarks: [
    {
      required: true,
      message: "请输入备注",
      trigger: "change",
    },
  ],
});

const updateStockIn = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      form.WarehouseName = warehouseModel.value.join("-");
      axios.put("Storage/UpdateStockInSel", form).then((res) => {
        if (res.data.Code == 200) {
          ElMessage.success("修改成功");
          router.push("/UserList/outtabshow");
        } else {
          ElMessage.error("修改失败");
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const getStockInSel = () => {
  const stockInId = route.query.stockInId;
  axios.get(`Storage/GetStockInSel?stockInId=` + stockInId).then((res) => {
    if (res.data.Code == 200) {
      if (res.data.Data.StockInCode) {
        type.value = ["System Number"]; // 设置 type 数组为非空值，使产品编号禁用
      } else {
        type.value = []; // 设置 type 数组为空值，使产品编号启用
      }
      form.StockInId = res.data.Data.StockInId;
      form.StockInType = res.data.Data.StockInType;
      form.StockInCode = res.data.Data.StockInCode;
      form.StockInSubject = res.data.Data.StockInSubject;
      form.StockInDate = res.data.Data.StockInDate;
      form.ProductionOrderID = res.data.Data.ProductionOrderID;
      form.StockInEmployee = res.data.Data.StockInEmployee;
      form.WarehouseName = res.data.Data.WarehouseName;
      form.Remarks = res.data.Data.Remarks;
      warehouseModel.value = res.data.Data.WarehouseName.split("-");
    }
  });
};

const optionsList = () => {
  axios.get("Storage/GetMemusAll?pid=0").then((res) => {
    warehouseOPtion.value = res.data.Data;
    console.log(warehouseOPtion.value);
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  console.log(warehouseOPtion.value);
};

const defaultProps = {
  children: "children",
  label: "WarehouseName",
  value: "WarehouseName",
};

getStockInSel();
optionsList();
</script>

<style scoped>
.container {
  max-width: 1400px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title {
  margin-bottom: 20px;
  color: #333;
}

.form-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-upload__text {
  margin-top: 10px;
}

.el-upload__tip {
  color: #999;
}

.el-button {
  margin-right: 10px;
}

.el-checkbox-group {
  margin-left: 10px;
}
</style>